<template>
  <div class="app-container">



    <el-row>
  <el-col :span="6" class="card-box" v-for="(item,index) in pigList" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <div slot="header" class="content">

            <img :src="bindIcon(item.bucketName,item.fileName)" width="100%" height="200px">
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
            
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell" >编号：</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >{{item.pnumber}}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">是否防疫：</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{item.hasImmune}}</div></td>
                </tr>
              
                <tr>
                   <td class="el-table__cell is-leaf"><div class="cell">体重：</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >{{item.birthWeight}}</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">饲养员：</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">{{item.breederName}}</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <pagination
          v-show="total>0"
          :total="total"
           :page-size="8"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"

      >
      </pagination>
 
  </div>
</template>


<script>
import { listPig } from "@/api/system/archives/dpig";




export default {
  name: "Server",
  data() {
    return {
      // 服务器信息

 
      picName:"http://42.192.84.201:9000/",
      loading: true,


      total:0,

      pigList: [],

      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
    };
    
  },
  created() {
 this.getList();

  
  },
  methods: {
    /** 查询服务器信息 */
   getList() {
      this.loading = true;
      listPig(this.queryParams).then(response => {
     console.log(response);
      
       this.pigList=response.rows;
      this.total = response.total;
        this.loading = false;
      
        }
      );
    },

bindIcon(buckName,fileName){

  return this.picName+buckName+"/"+fileName;
}
  }
};
</script>
<style>
img{

  margin-left: 5px;
}

</style>